<template>
    <a-button @click="showModal" size="small">
        <template #icon>
            <component :is="iconModel || 'ant-icon-setting-outlined'" />
        </template>
    </a-button>
    <a-modal v-model:open="open" title="图标选择器" @ok="handleClear" width="600px" cancelText="取消" okText="清除" closable
        :destroyOnClose="true">
        <a-input 
            placeholder="搜索图标" 
            v-model:value="params.searchValue" 
            size="large"
            @change="handleSearchChange(params.activeKey)">
            <template #suffix>
                <ant-icon-search-outlined />
            </template>
        </a-input>
        <a-tabs v-model:activeKey="params.activeKey" @change="handleTabChange">
            <a-tab-pane v-for="item in confIcons" :key="item.key" :tab="item.name" class="pt-3">
                <div class="grid is-col-min-2">
                    <div class="cell has-text-centered" v-for="icon in handleSearchChange(params.activeKey)" :key="icon">
                        <a class="box p-2" @click="seclectIconClick(icon)"><component :is="icon" /></a>
                    </div>
                </div>
            </a-tab-pane>

        </a-tabs>
    </a-modal>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import configIcons from '@/config/iconSelect';

const { proxy } = getCurrentInstance()
// modal 控制
const open = ref(false)
// 图标数据
const confIcons = ref([...configIcons.icons])
// 传递的图标,双向修改
const iconModel = defineModel('iconModel')
// 搜索参数
const params = reactive({
    activeKey: 'default',
    searchValue: ''
})

// 弹窗控制打开
const showModal = () => {
    open.value = true
}
// 关闭弹窗
const handleClose = () => {
    open.value = false
}
// 清除图标
const handleClear = () => {
    iconModel.value = ''
}
// tab 切换
const handleTabChange = (key) => {
    params.activeKey = key
    handleSearchChange(params.activeKey)
}
// 搜索输入响应事件
const handleSearchChange = (key) => {
    let filterIcons = []
    let icons = [...configIcons.icons]
    icons.map(item => {
       if (item.key == key) {
            filterIcons = params.searchValue ? item.icons.filter(icon => params.searchValue && icon.includes(params.searchValue)) : item.icons
        }
    })
    return filterIcons
}
// 选择图标
const seclectIconClick = (icon) => {
    iconModel.value = icon
    handleClose()
    proxy.$emit('onSelectIcon', icon)
}

// 父组件事件
defineEmits(['onSelectIcon'])
// 挂载事件到组件$refs
defineExpose({ showModal, handleClear, handleClose })

</script>

<style scoped>
svg {
    width: 1.5rem;
    height: 1.5rem;
}
</style>